<template>
  <div class="news-detail">
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span>返回新闻列表</span>
    </div>

    <!-- 文章内容 -->
    <div class="article-container" v-if="article">
      <!-- 文章头部 -->
      <div class="article-header">
        <div class="article-meta">
          <span class="article-category">{{ getCategoryName(article.category) }}</span>
          <span class="article-date">{{ article.date }}</span>
        </div>
        <h1 class="article-title">{{ article.title }}</h1>
        <div class="article-tags">
          <span 
            v-for="tag in article.tags" 
            :key="tag"
            class="tag"
          >
            {{ tag }}
          </span>
        </div>
      </div>

      <!-- 文章图片 -->
      <div class="article-image">
        <img :src="article.image" :alt="article.title" />
      </div>

      <!-- 文章正文 -->
      <div class="article-content">
        <div class="content-section">
          <h2>活动概述</h2>
          <p>{{ article.summary }}</p>
          <p v-if="article.category === 'events'">
            亲爱的舰长们，全新活动现已开启！在这个充满挑战与机遇的活动中，舰长们将体验到前所未有的战斗乐趣。
            活动期间，舰长们可以通过完成各种任务来获得丰厚的奖励，包括但不限于水晶、升级材料、限定装备等珍贵物品。
          </p>
          <p v-else-if="article.category === 'updates'">
            本次更新为舰长们带来了全新的游戏内容和优化体验。我们持续致力于为舰长们提供更加精彩的游戏世界，
            每一次更新都凝聚着开发团队的心血与努力。希望舰长们能够在新版本中找到属于自己的乐趣。
          </p>
          <p v-else-if="article.category === 'announcements'">
            为了给舰长们提供更好的游戏体验，我们将按照以下安排进行相关调整。请舰长们注意相关时间节点，
            合理安排游戏时间。如有任何疑问，请及时联系客服团队，我们将竭诚为您服务。
          </p>
          <p v-else>
            《崩坏3》作为一款深受玩家喜爱的动作游戏，始终致力于为舰长们带来最优质的游戏体验。
            我们将持续关注玩家反馈，不断优化游戏内容，为大家呈现更加精彩的崩坏世界。
          </p>
        </div>

        <div class="content-section" v-if="article.category === 'events'">
          <h2>活动时间</h2>
          <div class="time-info">
            <div class="time-item">
              <span class="time-label">活动开始：</span>
              <span class="time-value">{{ getEventStartTime(article.date) }}</span>
            </div>
            <div class="time-item">
              <span class="time-label">活动结束：</span>
              <span class="time-value">{{ getEventEndTime(article.date) }}</span>
            </div>
          </div>
        </div>

        <div class="content-section">
          <h2>{{ getContentTitle(article.category) }}</h2>
          <div class="feature-list">
            <div class="feature-item" v-for="(feature, index) in getFeatures(article.category)" :key="index">
              <div class="feature-icon">{{ index + 1 }}</div>
              <div class="feature-text">{{ feature }}</div>
            </div>
          </div>
        </div>

        <div class="content-section" v-if="article.category === 'events'">
          <h2>奖励预览</h2>
          <div class="rewards-grid">
            <div class="reward-item" v-for="(reward, index) in getRewards()" :key="index">
              <div class="reward-icon">🎁</div>
              <div class="reward-name">{{ reward.name }}</div>
              <div class="reward-desc">{{ reward.desc }}</div>
            </div>
          </div>
        </div>

        <div class="content-section">
          <h2>注意事项</h2>
          <ul class="notice-list">
            <li v-for="(notice, index) in getNotices(article.category)" :key="index">
              {{ notice }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 相关推荐 -->
      <div class="related-news">
        <h3>相关推荐</h3>
        <div class="related-list">
          <div 
            v-for="related in relatedArticles" 
            :key="related.id"
            class="related-item"
            @click="viewRelated(related)"
          >
            <img :src="related.image" :alt="related.title" />
            <div class="related-info">
              <h4>{{ related.title }}</h4>
              <p>{{ related.summary }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsDetail',
  props: {
    article: {
      type: Object,
      required: true
    },
    allArticles: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      newsCategories: [
        { key: 'latest', name: '最新' },
        { key: 'updates', name: '动态' },
        { key: 'announcements', name: '公告' },
        { key: 'events', name: '活动' },
        { key: 'news', name: '资讯' }
      ]
    }
  },
  computed: {
    relatedArticles() {
      return this.allArticles
        .filter(item => item.id !== this.article.id && item.category === this.article.category)
        .slice(0, 3)
    }
  },
  methods: {
    goBack() {
      this.$emit('go-back')
    },
    getCategoryName(categoryKey) {
      const category = this.newsCategories.find(cat => cat.key === categoryKey)
      return category ? category.name : categoryKey
    },
    getEventStartTime(date) {
      return date + ' 10:00'
    },
    getEventEndTime(date) {
      const endDate = new Date(date)
      endDate.setDate(endDate.getDate() + 14)
      return endDate.toISOString().split('T')[0].replace(/-/g, '/') + ' 23:59'
    },
    getContentTitle(category) {
      const titles = {
        events: '活动内容',
        updates: '更新内容',
        announcements: '公告详情',
        news: '资讯详情',
        latest: '详细信息'
      }
      return titles[category] || '详细信息'
    },
    getFeatures(category) {
      const features = {
        events: [
          '参与活动可获得大量水晶奖励',
          '完成指定任务解锁限定装备',
          '活动期间经验值获取翻倍',
          '特殊关卡开放，挑战更高难度'
        ],
        updates: [
          '全新角色技能机制优化',
          '游戏界面视觉效果提升',
          '战斗系统平衡性调整',
          '新增多项便民功能'
        ],
        announcements: [
          '服务时间调整安排',
          '补偿方案详细说明',
          '后续优化计划预告',
          '玩家反馈处理机制'
        ],
        news: [
          '游戏发展里程碑回顾',
          '开发团队幕后故事',
          '社区活动精彩瞬间',
          '未来内容规划展望'
        ]
      }
      return features[category] || features.news
    },
    getRewards() {
      return [
        { name: '水晶 ×500', desc: '完成主要任务获得' },
        { name: '限定装备', desc: '活动专属奖励' },
        { name: '升级材料', desc: '角色培养必需品' },
        { name: '特殊称号', desc: '彰显荣誉身份' }
      ]
    },
    getNotices(category) {
      const notices = {
        events: [
          '活动期间请确保网络连接稳定',
          '奖励将在活动结束后统一发放',
          '每日任务重置时间为凌晨4点',
          '如遇问题请及时联系客服'
        ],
        updates: [
          '更新前请确保设备存储空间充足',
          '建议在WiFi环境下进行更新',
          '更新过程中请勿关闭游戏',
          '如遇异常请重启游戏尝试'
        ],
        announcements: [
          '请舰长们关注官方公告时间',
          '相关调整将按时生效',
          '如有疑问请查看FAQ或联系客服',
          '感谢舰长们的理解与支持'
        ],
        news: [
          '内容仅供参考，以游戏内实际为准',
          '相关信息可能会根据情况调整',
          '更多详情请关注官方渠道',
          '欢迎舰长们积极参与讨论'
        ]
      }
      return notices[category] || notices.news
    },
    viewRelated(article) {
      this.$emit('view-article', article)
    }
  }
}
</script>

<style scoped>
.news-detail {
  min-height: 100vh;
  background: transparent;
  padding: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  margin-bottom: 30px;
  padding: 10px 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: fit-content;
  transition: all 0.3s ease;
}

.back-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.article-container {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.article-header {
  padding: 30px;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.article-category {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: #fff;
  padding: 6px 16px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 500;
}

.article-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.article-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.article-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  padding: 30px;
}

.content-section {
  margin-bottom: 30px;
}

.content-section h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 107, 107, 0.3);
}

.content-section p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 15px;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  min-width: 80px;
}

.time-value {
  color: #fff;
  background: rgba(255, 107, 107, 0.2);
  padding: 5px 12px;
  border-radius: 8px;
  font-weight: 500;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-icon {
  width: 30px;
  height: 30px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.feature-text {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-size: 15px;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.reward-item {
  text-align: center;
  padding: 20px 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.reward-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.reward-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.reward-name {
  color: #fff;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}

.reward-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.notice-list {
  list-style: none;
  padding: 0;
}

.notice-list li {
  color: rgba(255, 255, 255, 0.8);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.notice-list li:before {
  content: '•';
  color: #ff6b6b;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.notice-list li:last-child {
  border-bottom: none;
}

.related-news {
  margin-top: 40px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related-news h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.related-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.related-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.related-item img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.related-info h4 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
  line-height: 1.3;
}

.related-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .news-detail {
    padding: 15px;
  }
  
  .article-header {
    padding: 20px;
  }
  
  .article-title {
    font-size: 24px;
  }
  
  .article-content {
    padding: 20px;
  }
  
  .rewards-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  
  .related-news {
    padding: 20px;
  }
}
</style>